<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="">
    <title>Linkage</title>
    <style type="text/css">
        body {
            background-color: #eccc68;
        }

        canvas {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <script type="module">
        import {createCanvas, vector2, vector2random, constrain, random, map, animation, mouse, frame, curve, circle, line, fill, stroke} from './spring/board.js'
        const width = 800, height = 600, r = 16
        const tree = [] // , walker = vector2()
        // tree[0] = vector2(width / 2, height / 2)

        class Segment {
            constructor(opt={x: 0, y: 0, len: 0, angle: 0, parent: null}) {
                this.a = vector2(opt.x || 0, opt.y || 0)
                if (opt.parent) {
                    this.a.copy(opt.parent.b || vector2(0, 0))
                }
                this.len = opt.len || 0
                this.angle = opt.angle || 0
                this.selfAngle = this.angle
                this.parent = opt.parent || null
                this.calculateB()
                this.t = opt.t || 0
                this.dt = opt.dt || 0.1
                this.width = opt.width || 4
            }

            calculateB() {
                this.b = this.a.clone().add(vector2(this.len * Math.cos(this.angle), this.len * Math.sin(this.angle)))
            }

            show() {
                line(this.a, this.b)
                stroke('#ccffccff', map(this.width, 1, 10, 1, 10) || 4)
            }

            wiggle() {
                let max = Math.abs(this.dt), min = -max
                this.selfAngle = map(Math.sin(this.t), -1, 1, min, max)
                this.t += 0.3
                this.dt *= 0.99
            }

            follow(fx, fy) {
                let target = vector2(fx, fy)
                let dir = target.clone().sub(this.a)
                let angle = dir.radian > Math.PI ? dir.radian - 2 * Math.PI : dir.radian
                this.selfAngle = angle
                this.dt = this.selfAngle
                dir.length = this.len
                this.a.copy(target.clone().add(dir.mul(-1)))
            }

            update() {
                this.angle = this.selfAngle
                if (this.parent) {
                    // this.a.copy(this.parent.b)
                    // this.angle += this.parent.angle
                }
                this.calculateB()
            }

        }
        let root = new Segment({x: 200, y: height / 2, len: 30, angle: 0})
        root.width = 1
        // let next = new Segment({parent: root, len: 100, angle: Math.PI / 4})
        let current = root
        for (let i = 0; i < 10;++i) {
            let next = new Segment({parent: current, len: 30, angle: Math.PI / 4, t: i})
            current.child = next
            current = next
            current.width = i + 2
        }
        createCanvas(width / 2, height / 2)
        frame(25)
        let tail = current
        function draw() {
            current = tail
            if (mouse.isPress) {
                current.follow(mouse.position.x, mouse.position.y)
            }
            current.update()
            current.show()
            while(current.parent) {
                current = current.parent
                current.follow(current.child.a.x, current.child.a.y)
                current.update()
                current.show()
            }
            // last one
        }
        animation(draw)
    </script>
</body>

</html>